import React, { useEffect, useState } from "react";
import {
  DesktopOutlined,
  FileOutlined,
  PieChartOutlined,
  TeamOutlined,
  UserOutlined,
} from "@ant-design/icons";
import type { MenuProps, TableProps } from "antd";
import http from "../src/api/axiosapi";
import { Breadcrumb, Layout, Menu, theme, Space, Table, Tag } from "antd";

const { Header, Content, Footer, Sider } = Layout;

type MenuItem = Required<MenuProps>["items"][number];

interface DataType {
  key: string;
  name: string;
  age: number;
  address: string;
  tags: string[];
}
function getItem(
  label: React.ReactNode,
  key: React.Key,
  icon?: React.ReactNode,
  children?: MenuItem[]
): MenuItem {
  return {
    key,
    icon,
    children,
    label,
  } as MenuItem;
}

const items: MenuItem[] = [
  getItem("Option 1", "1", <PieChartOutlined />),
  getItem("Option 2", "2", <DesktopOutlined />),
  getItem("User", "sub1", <UserOutlined />, [
    getItem("Tom", "3"),
    getItem("Bill", "4"),
    getItem("Alex", "5"),
  ]),
  getItem("Team", "sub2", <TeamOutlined />, [
    getItem("Team 1", "6"),
    getItem("Team 2", "8"),
  ]),
  getItem("Files", "9", <FileOutlined />),
];
const columns: TableProps<DataType>["columns"] = [
  {
    title: "姓名",
    dataIndex: "name",
    key: "name",
    render: (text) => <a>{text}</a>,
  },
  {
    title: "Age",
    dataIndex: "age",
    key: "age",
  },
  {
    title: "Address",
    dataIndex: "address",
    key: "address",
  },
  // {
  //   title: "Tags",
  //   key: "tags",
  //   dataIndex: "tags",
  //   render: (_, { tags }) => (
  //     <>
  //       {tags.map((tag) => {
  //         let color = tag.length > 5 ? "geekblue" : "green";
  //         if (tag === "loser") {
  //           color = "volcano";
  //         }
  //         return (
  //           <Tag color={color} key={tag}>
  //             {tag.toUpperCase()}
  //           </Tag>
  //         );
  //       })}
  //     </>
  //   ),
  // },
  {
    title: "Action",
    key: "action",
    render: (_, record) => (
      <Space size="middle">
        <a>Delete</a>
      </Space>
    ),
  },
];

const data: DataType[] = [
  {
    key: "1",
    name: "李四",
    age: 213,
    address: "爱吃瓜",
    tags: ["nice", "developer"],
  },
  {
    key: "2",
    name: "王五",
    age: 12,
    address: "第三方都是第三方水电费水电费",
    tags: ["loser"],
  },
  {
    key: "4",
    name: "山东省地方",
    age: 32,
    address: "阿莎嘎嘎放的多少 奥迪",
    tags: ["cool", "teacher"],
  },
  {
    key: "5",
    name: "答复分",
    age: 32,
    address: "挺好好吃v你发的",
    tags: ["cool", "teacher"],
  },
  {
    key: "6",
    name: "阿达的",
    age: 32,
    address: "特复旦复华VB阿萨",
    tags: ["cool", "teacher"],
  },
  {
    key: "7",
    name: "这次",
    age: 32,
    address: "发发发艾师傅艾师傅啊",
    tags: ["cool", "teacher"],
  },
  {
    key: "8",
    name: "合格客家话",
    age: 32,
    address: "啊啊付啊地方",
    tags: ["cool", "teacher"],
  },
];
const App: React.FC = () => {
  const [dataList, setDatalist] = useState();
  const fundata = async () => {
    const res = await http.get("/article/list");
    console.log(res);
    setDatalist(res.data.rows);
  };

  useEffect(() => {
    fundata();
  }, []);
  const [collapsed, setCollapsed] = useState(false);
  const {
    token: { colorBgContainer, borderRadiusLG },
  } = theme.useToken();

  return (
    <Layout style={{ minHeight: "100vh" }}>
      <Sider
        collapsible
        collapsed={collapsed}
        onCollapse={(value) => setCollapsed(value)}
      >
        <div className="demo-logo-vertical" />
        <Menu
          theme="dark"
          defaultSelectedKeys={["1"]}
          mode="inline"
          items={items}
        />
      </Sider>
      <Layout>
        <Header style={{ padding: 0, background: colorBgContainer }} />
        <Content style={{ margin: "0 16px" }}>
          <Breadcrumb
            style={{ margin: "16px 0" }}
            items={[{ title: "User" }, { title: "Bill" }]}
          />
          <div
            style={{
              padding: 24,
              minHeight: 360,
              background: colorBgContainer,
              borderRadius: borderRadiusLG,
            }}
          >
          <Table<DataType> columns={columns} dataSource={data} />
          </div>
        </Content>
        <Footer style={{ textAlign: "center" }}>
          Ant Design ©{new Date().getFullYear()} Created by Ant UED
        </Footer>
      </Layout>
    </Layout>
  );
};

export default App;
